<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="homeAdvertise"
      :rules="rules"
      ref="form"
      label-width="150px"
      size="small"
    >
      <el-form-item label="广告位名称：" prop="name">
        <el-input v-model="homeAdvertise.name" class="input-width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave()">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import Axios from "axios";
import { axios } from "../../utils";

export default {
  name: "HomeAdvertiseDetail",
  //组件传参
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryId: null,
      homeAdvertise: {
        createTime: "",
        id: "",
        isDel: "",
        name: "",
        spaceKey: "",
        updateTime: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入广告名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },

  //钩子函数
  created() {
    if (this.$route.query.id) {
      this.queryId = this.$route.query.id;
      this.loadPromotionSpace(this.$route.query.id);
    }
  },

  methods: {
    //方法1: 保存广告位信息
    async handleSave() {
      const data = this.homeAdvertise;
      const res = await Axios.post(
        "/PromotionSpace/saveOrUpdatePromotionSpace",
        data
      );
      
      if (res.data.state == 200) {
        this.$message.success(res.data.message);
        this.loadPromotionSpace(this.queryId);
      }
    },

    //方法2: 回显广告位信息
    async loadPromotionSpace(id) {
      const res = await Axios.get("/PromotionSpace/findPromotionSpaceById", {
        params: {
          id
        }
      });
      this.homeAdvertise = res.data.content;
    }
  }
};
</script>
<style scoped>
.input-width {
  width: 70%;
}
</style>
